<template>
  <div >
    <!-- 面包屑 -->
    <div class="home-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >车间模拟</el-breadcrumb-item>
        <el-breadcrumb-item >订单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div style="margin: 0 auto;background-color: #FFFFFF;padding: 10px;border-radius: 7px;">
      <!-- 订单列表 -->
      <div style="margin-bottom: 40px;">
        <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px;">
          <span class="order-title">订单列表</span>
          <div>
            <el-button type="primary" plain icon="el-icon-plus" @click="ordershowEdit = true">添加订单</el-button>
            <el-input v-model="this.orderQueryInput" prefix-icon="el-icon-search" placeholder="请输入内容" style="width: 200px;"></el-input>
          </div>
        </div>
        <vxe-table
          border
          resizable
          highlight-hover-row
          highlight-current-row
          :edit-config="{trigger: 'click', mode: 'row'}"
          show-overflow
          :loading="orderLoading"
          ref="OrderTable"
          :data="OrderTable">
          <vxe-table-column field="orderId" title="ID" :edit-render="{name: 'input', immediate: true, attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="orderTime" title="时间" width="210">
            <template  v-slot="{ row }">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="row.orderTime"
                size="medium"
                :style="{width:195+'px'}"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </template>
          </vxe-table-column>
          <vxe-table-column field="orderName" title="名称"  :edit-render="{name: 'input', immediate: true, attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="orderQuantity" title="数量"  :edit-render="{name: 'input', immediate: true, attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="orderStatus" title="状态"  :edit-render="{name: 'input', immediate: true, attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="completionRate" title="完成率"  :edit-render="{name: 'input', immediate: true, attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="timeConsuming" title="耗时" :edit-render="{name: 'input', immediate: true, attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column title="操作" width="140">
            <template v-slot="{ row }">
              <template v-if="$refs.OrderTable.isActiveByRow(row)">
                <el-button type="success" plain size="small" @click="orderUpdate(row)">保存</el-button>
                <el-button type="info" plain size="small" @click="orderCancle(row)">取消</el-button>
              </template>
              <template v-else>
                <el-button type="primary" plain size="mini" @click="orderEditor(row)">编辑</el-button>
                <el-button type="danger"plain size="small" @click="orderDelete(row)" >删除</el-button>
              </template>
            </template>
          </vxe-table-column>
        </vxe-table>
      </div>



      <!-- 销售额 -->
      <div style="margin-bottom: 40px;">
        <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px;">
          <span class="order-title">销售额</span>
          <div>
            <el-button type="primary" plain icon="el-icon-plus" @click="sellshowEdit = true">添加销售</el-button>
            <el-input v-model="this.sellQueryInput" prefix-icon="el-icon-search" placeholder="请输入内容" style="width: 200px;"></el-input>
          </div>
        </div>
        <vxe-table
          border
          resizable
          show-overflow
          highlight-hover-row
          highlight-current-row
          :loading="sellLoading"
          :edit-config="{trigger: 'click', mode: 'row'}"
          :edit-render="{name: 'input', immediate: true, attrs: {type: 'text'}}"
          ref="SellTable"
          :data="SellTable">
          <vxe-table-column field="saleId" title="ID" :edit-render="{name: 'input', immediate: true, attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="saleTime" title="时间" width="210">
            <template  v-slot="{ row }">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="row.saleTime"
                size="medium"
                :style="{width:195+'px'}"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </template>
          </vxe-table-column>
          <vxe-table-column field="product" title="产品" :edit-render="{name: 'input', immediate: true, attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="province" title="省份" :edit-render="{name: 'input', immediate: true, attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="quantity" title="数量" :edit-render="{name: 'input', immediate: true, attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="amount" title="金额" :edit-render="{name: 'input', immediate: true, attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column title="操作" width="140">
            <template v-slot="{ row }">
              <template v-if="$refs.SellTable.isActiveByRow(row)">
                <el-button type="success" plain size="small" @click="sellUpdate(row)" >保存</el-button>
                <el-button type="info" plain size="small" @click="sellCancle(row)">取消</el-button>
              </template>
              <template v-else>
                <el-button type="primary" plain size="mini" @click="SellEditor(row)">编辑</el-button>
                <el-button type="danger"plain size="small" @click="sellDelete(row)" >删除</el-button>
              </template>
            </template>
          </vxe-table-column>
        </vxe-table>
      </div>





      <!-- 原料消耗 -->
      <div style="margin-bottom: 40px;">
        <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px;">
          <span class="order-title">原料消耗</span>
          <div>
            <el-button type="primary" plain icon="el-icon-plus" @click="materialshowEdit = true">添加原料</el-button>
            <el-input v-model="this.materialQueryInput" prefix-icon="el-icon-search" placeholder="请输入内容" style="width: 200px;"></el-input>
          </div>
        </div>
        <vxe-table
          border
          resizable
          show-overflow
          highlight-hover-row
          highlight-current-row
          :loading="materialLoading"
          ref="MaterialTable"
          :edit-config="{trigger: 'click', mode: 'row'}"
          :data="MaterialTable">
          <vxe-table-column field="materialId" title="ID" :edit-render="{name: 'input', immediate: true, attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="materialTime" title="时间" width="210" >
            <template  v-slot="{ row }">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="row.materialTime"
                size="medium"
                :style="{width:195+'px'}"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </template>
          </vxe-table-column>
          <vxe-table-column field="product" title="产品" :edit-render="{name: 'input', immediate: true, attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column field="quantity" title="数量" :edit-render="{name: 'input', immediate: true, attrs: {type: 'text'}}"></vxe-table-column>
          <vxe-table-column title="操作" width="140">
            <template v-slot="{ row }">
              <template v-if="$refs.MaterialTable.isActiveByRow(row)">
                <el-button type="success" plain size="small" @click="materialUpdate(row)">保存</el-button>
                <el-button type="info" plain size="small" @click="materialCancle(row)">取消</el-button>
              </template>
              <template v-else>
                <el-button type="primary" plain size="mini" @click="materialEditor(row)">编辑</el-button>
                <el-button type="danger"plain size="small" @click="materialDelete(row)" >删除</el-button>
              </template>
            </template>
          </vxe-table-column>
        </vxe-table>
      </div>
    </div>


    <!-- 添加order弹窗 -->
    <vxe-modal ref="OrderModal" v-model="ordershowEdit" title="订单添加" width="800" resize destroy-on-close>
      <vxe-form :data="orderAddForm" :rules="formRules" title-align="right" title-width="100">
        <vxe-form-item title="ID:" field="orderId" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入名称'}}"></vxe-form-item>
        <vxe-form-item title="日期:" field="orderDate" span="12">
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="orderAddForm.orderTime"
            size="medium"
            :style="{width:275+'px'}"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </vxe-form-item>
        <!-- <vxe-form-item  field="orderTime" span="3" :item-render="{name: 'input',attrs: {type: 'time', placeholder: '请选择日期'}}"></vxe-form-item> -->
        <vxe-form-item title="名称:" field="orderName" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入名称'}}"></vxe-form-item>
        <vxe-form-item title="数量:" field="orderQuantity" span="12" :item-render="{name: 'input', attrs: {type: 'number', placeholder: '请输入数量'}}"></vxe-form-item>
        <vxe-form-item title="完成率(%):" field="completionRate" span="12" :item-render="{name: 'input', attrs: {type: 'number', placeholder: '请输入数量'}}"></vxe-form-item>
        <vxe-form-item title="耗时(h):" field="timeConsuming" span="12" :item-render="{name: 'input', attrs: {type: 'number', placeholder: '请输入数量'}}"></vxe-form-item>
        <vxe-form-item title="状态:" field="status" span="12" :item-render="{name: '$select', options: statusList} "></vxe-form-item>
        <vxe-form-item align="right" span="24">
          <vxe-button type="submit" status="primary" @click="orderAdd">保存</vxe-button>
          <vxe-button @click="ordershowEdit = false">取消</vxe-button>
        </vxe-form-item>
      </vxe-form>
    </vxe-modal>

    <!-- sell 添加弹窗 -->
    <vxe-modal ref="SellModal" v-model="sellshowEdit" title="销售额添加" width="800" resize destroy-on-close>
      <vxe-form :data="sellAddForm" title-align="right" title-width="100">
        <!-- <vxe-form-item title="ID:" field="saleId" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入名称'}}"></vxe-form-item> -->
        <vxe-form-item title="时间:" field="saleDate" span="12">
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="sellAddForm.saleTime"
            size="medium"
            :style="{width:275+'px'}"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </vxe-form-item>
        <vxe-form-item title="产品:" field="product" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入名称'}}"></vxe-form-item>
        <vxe-form-item title="省份:" field="province" span="12" :item-render="{name: 'input', attrs: {type: 'text', placeholder: '请输入数量'}}"></vxe-form-item>
        <vxe-form-item title="数量:" field="quantity" span="12" :item-render="{name: 'input', attrs: {type: 'number', placeholder: '请输入数量'}}"></vxe-form-item>
        <vxe-form-item title="金额:" field="amount" span="12" :item-render="{name: 'input', attrs: {type: 'number', placeholder: '请输入数量'}}"></vxe-form-item>
        <vxe-form-item align="right" span="24">
          <vxe-button type="submit" status="primary" @click="sellAdd">保存</vxe-button>
          <vxe-button @click="sellshowEdit = false">取消</vxe-button>
        </vxe-form-item>
      </vxe-form>
    </vxe-modal>



    <!-- material 添加弹窗 -->
    <vxe-modal ref="MaterialModal" v-model="materialshowEdit" title="销售额添加" width="800" resize destroy-on-close>
      <vxe-form :data="materialAddForm" title-align="right" title-width="100">
        <vxe-form-item title="ID:" field="materialId" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入名称'}}"></vxe-form-item>
        <vxe-form-item title="时间:" field="materialTime" span="12" >
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="materialAddForm.materialTime"
            size="medium"
            :style="{width:275+'px'}"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </vxe-form-item>
        <vxe-form-item title="产品:" field="product" span="12" :item-render="{name: 'input', attrs: {placeholder: '请输入名称'}}"></vxe-form-item>
        <vxe-form-item title="数量:" field="quantity" span="12" :item-render="{name: 'input', attrs: {type: 'number', placeholder: '请输入数量'}}"></vxe-form-item>
        <vxe-form-item align="right" span="24">
          <vxe-button type="submit" status="primary" @click="materialAdd">保存</vxe-button>
          <vxe-button @click="materalshowEdit = false">取消</vxe-button>
        </vxe-form-item>
      </vxe-form>
    </vxe-modal>

  </div>
</template>

<script>
  import OrderApi from '@/api/orderApi'
  export default{
    data(){
      return{
        // 订单添加form
        orderAddForm:{
          orderId:'',
          orderDate:'',
          orderTime:'',
          orderName:'',
          orderQuantity:'',
          completionRate:'',
          timeConsuming:'',
          status:""
        },
        // 销售添加form
        sellAddForm:{
          // saleId:'',
          saleTime:"",
          product:"",
          quantity:'',
        },
        // 原料添加form
        materialAddForm:{
          materialId:'',
          materialTime:"",
          product:"",
          province:'',
          quantity:'',
          amount:''
        },

        // 订单分页
        OrderPageInfo:{
          // pageNo:1,
          pageSize:10,
          currentPage: 1,
          count:0
        },
        // 销售分页
        SellPageInfo:{
          // pageNo:1,
          pageSize:10,
          currentPage: 1,
          count:0
        },
        // 原料分页
        materialPageInfo:{
          // pageNo:1,
          pageSize:10,
          currentPage: 1,
          count:0
        },
        // 订单
        OrderTable:[],
        //sell
        SellTable:[],
        // 原料
        MaterialTable:[],
        // 加载
        orderLoading:false,
        sellLoading:false,
        materialLoading:false,

        // 显示
        ordershowEdit:false,
        sellshowEdit:false,
        materialshowEdit:false,

        // 查询
        orderQueryInput:"",
        sellQueryInput:"",
        materialQueryInput:"",


        // 添加订单status选择
        statusList: [
          { label: '排队', value: '-1' },
          { label: '加工中', value: '0' },
          { label: '完成', value: '1' }
        ],

        formRules: {
          orderId: [
            { required: true, message: '请输入名称' },
            { min: 3, message: '长度在 3 到 5 个字符' }
          ],
        }
      }
    },
    methods:{
      // 获取订单list
      getOrderList(){
        this.orderLoading = true
        OrderApi.OrderList(this.OrderPageInfo).then(res => {
          if(res.data.status === "200"){
            this.OrderTable = res.data.data.records
            this.orderLoading = false
          }
        })
      },
      // 获取原料list
      getMaterialList(){
        this.materialLoading = true
        OrderApi.MaterialList(this.materialPageInfo).then(res => {
          if(res.data.status === "200"){
            this.MaterialTable = res.data.data.records
            this.materialLoading = false
          }
        })
      },
      // 获取销售list
      getSellList(){
        this.sellLoading = true
        OrderApi.SellList(this.SellPageInfo).then(res => {
          if(res.data.status === "200"){
            this.SellTable = res.data.data.records
            this.sellLoading = false
          }
        })
      },
      // 订单删除
      orderDelete(row){
        this.$XModal.confirm('您确定要删除吗？').then(type => {
          if(type === "confirm"){
            OrderApi.OrderDelete(row.orderId).then(res => {
              if(res.data.status === "200"){
                // 重新获取数据
                this.getOrderList()
              }
            })
          }
        })
      },
      // 销售删除
      sellDelete(row){
        this.$XModal.confirm('您确定要删除吗？').then(type => {
          if(type === "confirm"){
            OrderApi.SellDelete(row.saleId).then(res => {
              if(res.data.status === "200"){
                // 重新获取数据
                this.getSellList()
              }
            })
          }
        })
      },
      // 原料删除
      materialDelete(row){
        this.$XModal.confirm('您确定要删除吗？').then(type => {
          if(type === "confirm"){
            OrderApi.MaterialDelete(row.materialId).then(res => {
              if(res.data.status === "200"){
                // 重新获取数据
                this.getMaterialList()
              }
            })
          }
        })
      },
      // 订单编辑
      orderEditor(row){
        this.$refs.OrderTable.setActiveRow(row)
      },
      // 销售编辑
      SellEditor(row){
        this.$refs.SellTable.setActiveRow(row)
      },
      // 原料编辑
      materialEditor(row){
        this.$refs.MaterialTable.setActiveRow(row)
      },
      // 订单更新
      orderUpdate(row){
        this.$refs.OrderTable.clearActived().then(() => {
          OrderApi.orderUpdate(row).then(res => {
            if(res.data.status === "200"){
              this.getOrderList()
            }
          })
        })
      },
      // 销售更新
      sellUpdate(row){
        this.$refs.SellTable.clearActived().then(() => {
          OrderApi.sellUpdate(row).then(res => {
            if(res.data.status === "200"){
              this.getSellList()
            }
          })
        })
      },
      // 原料更新
      materialUpdate(row){
        this.$refs.MaterialTable.clearActived().then(() => {
          OrderApi.materialUpdate(row).then(res => {
            if(res.data.status === "200"){
              this.getMaterialList()
            }
          })
        })
      },
      // 订单取消
      orderCancle(row){
        var Table = this.$refs.OrderTable
        Table.clearActived().then(() => {
          // 还原行数据
          Table.revertData(row)
        })
      },
      // 销售取消
      sellCancle(row){
        var Table = this.$refs.SellTable
        Table.clearActived().then(() => {
          // 还原行数据
          Table.revertData(row)
        })
      },
      // 原料取消
      materialCancle(row){
        var Table = this.$refs.MaterialTable
        Table.clearActived().then(() => {
          // 还原行数据
          Table.revertData(row)
        })
      },
      //订单插入
      orderAdd(){
        OrderApi.orderInsert(this.orderAddForm).then(res => {
          if(res.data.status === "200"){
            this.getOrderList()
            this.ordershowEdit = false
          }
        })
      },
      //销售插入
      sellAdd(){
        OrderApi.sellInsert(this.sellAddForm).then(res => {
          if(res.data.status === "200"){
            this.getSellList()
            this.sellshowEdit = false
          }
        })
      },
      //原料插入
      materialAdd(){
        OrderApi.materialInsert(this.materialAddForm).then(res => {
          if(res.data.status === "200"){
            this.getMaterialList()
            this.materialshowEdit = false
          }
        })
      },

    },
    created() {
      // 订单list
      this.getOrderList()
      // 销售e
      this.getSellList()
      // 原料
      this.getMaterialList()
    }
  }
</script>

<style scoped="scoped">
  .order-title{
    padding: 10px 20px;
    display: block;
    height: 20px;
    background-color: #F2F6FC;
    box-shadow: 1px 1px 3px #909399;
    margin-bottom: 2px;
    color: #2196E0;
    border-radius: 8px;
  }
</style>
